<template>
  <div id="app">
    <keep-alive >
      <router-view name="leftBar"></router-view>
    </keep-alive>
    <keep-alive include="EssayPage" exclude="TypeWriter">
      <router-view name="content"></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // 控制开 true/关灯 false
      light: false,
      screenWidth: document.body.clientWidth
    }
  },
  methods: {
    // 开灯函数
    lightUp() {
      document.getElementsByTagName('body')[0].style.setProperty('--colorBackground', '#F2F2F2')
      document.getElementsByTagName('body')[0].style.setProperty('--colorBar', '#BABABA')
      document.getElementsByTagName('body')[0].style.setProperty('--colorList', '#b8b6b6')
      document.getElementsByTagName('body')[0].style.setProperty('--colorMainText', '#000000')
      document.getElementsByTagName('body')[0].style.setProperty('--colorText', '#3A3936')
      document.getElementsByTagName('body')[0].style.setProperty('--colorBackgroundAssistant', '#4646463a')
    },
    // 关灯函数
    lightDown() {
      document.getElementsByTagName('body')[0].style.setProperty('--colorBackground', '#202020')
      document.getElementsByTagName('body')[0].style.setProperty('--colorBar', '#000000')
      document.getElementsByTagName('body')[0].style.setProperty('--colorList', '#181818')
      document.getElementsByTagName('body')[0].style.setProperty('--colorMainText', '#fefefe')
      document.getElementsByTagName('body')[0].style.setProperty('--colorText', '#9b9b9b')
      document.getElementsByTagName('body')[0].style.setProperty('--colorBackgroundAssistant', '#464646')
    },
    // 定义全局事件总线的回调函数
    // 开关灯事件,改变全局样式
    lightChange() {
      // 判断当前样式，调用函数切换另一个样式
      this.light ? this.lightDown() : this.lightUp()
      // 切换状态
      this.light = !this.light
      // 让TopBar组件同步App组件中light的状态
      this.$bus.$emit('topBarLightSynchronous', this.light)
    },
    // 同步light,trigger参数为同步请求发送方组件名的字符串
    lightSynchronous(trigger) {
      if (trigger == 'TopBar') {
        this.$bus.$emit('topBarLightSynchronous', this.light)
      }
      if (trigger == 'ListBar') {
        this.$bus.$emit('listBarLightSynchronous', this.light)
      }
      if (trigger == 'MoreListBar') {
        this.$bus.$emit('moreListBarLightSynchronous', this.light);
      }
    }
  },
  watch: {
    screenWidth(width) {
      // 小于 1450 leftBar变小
      if (width < 1450) {
        // 触发leftBar变小事件
        this.$bus.$emit('leftBarSmall')
        // 小于 1130 MoreList详细信息不显示
        if (width < 1130) {
          // 触发时间和人气不显示
          this.$bus.$emit('introductionUnShow')
        } else {
          // 触发人气的时间显示
          this.$bus.$emit('introductionShow')
        }
      } else {
        // 触发leftBar还原事件
        this.$bus.$emit('leftBarBack')
      }
    }
  },
  mounted() {
    // 为vm.$bus绑定自定义事件
    this.$bus.$on('lightChange', this.lightChange)
    this.$bus.$on('lightSynchronous', this.lightSynchronous)
    // 绑定监听窗口宽度变化
    // 使用window.onresize监听窗口变化，为了得到Vue实例，使用箭头函数
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
    // 判断是否是跳转到笔记页面，并判断是否需要切换开关灯样式
    /* 这里使用定时器，为了正确访问this.$route.path和this.$route.query.light(字符串) */
    setTimeout(() => {
      const curPath = this.$route.path
      if (curPath == '/article' && this.$route.query.light == 'true') {
        this.lightChange()
      }
    }, 100)
  },
  beforeDestroy() {
    // 为vm.$bus解绑自定义事件
    this.$bus.$off('lightChange')
    this.$bus.$off('lightSynchronous')
  }
}
</script>

<style lang="scss">
#app {
  display: grid;
  grid-template-columns: .5fr 2.5fr;
  overflow: hidden;
  grid-template-areas: 'left content';
}

// 设置整个滚动条区域样式
::-webkit-scrollbar {
  width: 10px;
  background-color: $color-background;
}

// 设置滚动条样式
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: $color-text;
}
</style>
